<template>
	<view>
		<view class="form">
			<view class="flex item">
				<view class="label">
					头像
				</view>
				<view class="right flex" @click="up">
					<image class="avatar" :src="form.avatar" mode=""></image>
					<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
				</view>
			</view>
			<view class="flex item1">
				<view class="label">
					昵称
				</view>
				<view class="right flex">
					<view class="input">
						<u--input inputAlign='right' placeholder="" placeholderStyle='color:#8B8B8B;' color='#333'
							fontSize='28rpx' border='none' v-model="form.nickname"></u--input>
					</view>
					<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
				</view>
			</view>
			<view class="flex item1">
				<view class="label">
					手机号
				</view>
				<view class="right flex">
					<view class="input">
						<u--input readonly inputAlign='right' placeholder="" placeholderStyle='color:#8B8B8B;' color='#333'
							fontSize='28rpx' border='none' v-model="form.mobile"></u--input>
					</view>
					<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
				</view>
			</view>
			<view class="flex item1">
				<view class="label">
					ID
				</view>
				<view class="right flex">
					<view class="input">
						<u--input readonly inputAlign='right' placeholder="" placeholderStyle='color:#8B8B8B;' color='#333'
							fontSize='28rpx' border='none' v-model="form.id"></u--input>
					</view>
					<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
				</view>
			</view>
			<view class="flex item1">
				<view class="label">
					邀请人
				</view>
				<view class="right flex">
					<view class="input">
						<u--input readonly inputAlign='right' placeholder="" placeholderStyle='color:#8B8B8B;' color='#333'
							fontSize='28rpx' border='none' v-model="form.parent.username"></u--input>
					</view>
					<image class="right_icon" src="/static/img/my/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<view class="btn" @click="modify">
				确认修改
			</view>
			<view class="btn btn2" @click="signOut">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import { profile } from '@/api/my.js'
	import { outLogin } from '@/api/login.js'
	import { upload } from '@/api/product.js'
	export default {
		data() {
			return {
				form: {
					
				}
			};
		},
		methods: {
			// 修改
			modify() {
				let {nickname,gender,avatar}=this.form
				profile({nickname,gender,avatar}).then(res => {
					if(res.data.code==1){
						uni.switchTab({
							url:'/pages/tabbar/mine'
						})
					}
				})
			},
			// 退出
			signOut() {
				outLogin().then(res => {
					// console.log(res.data)
					if(res.data.code==1){
						// uni.removeStorageSync('token')
						uni.clearStorageSync()
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/login/login'
							})
						},1000)
					}
				})
			},
			up(){
				let _this=this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: _this.$BASE_URL+'/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header:{token:uni.getStorageSync('token')},
							success: (uploadFileRes) => {
								_this.form.avatar=JSON.parse(uploadFileRes.data).data.fullurl
								console.log(_this.form.avatar)
							}
						});
					}
				});
			}
		},
		onLoad: function()  {
			this.form=uni.getStorageSync('userinfo')
			
		}
	}
</script>

<style lang="less">
	.form {
		border-top: 2rpx solid #F4F6F8;
		padding: 0 22rpx;

		.item {
			padding: 20rpx 13rpx;
			border-bottom: 2rpx solid #F4F6F8;
			font-size: 32rpx;

			.avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}

		}

		.item1 {
			padding: 32rpx 13rpx;
			border-bottom: 2rpx solid #F4F6F8;
			font-size: 32rpx;
		}

		.right_icon {
			width: 14rpx;
			height: 26rpx;
			margin-left: 32rpx;
		}
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn_box {
		position: fixed;
		bottom: 90rpx;
		left: 30rpx;

		.btn {
			width: 687rpx;
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
		}

		.btn2 {
			margin-top: 30rpx;
			border: 1rpx solid #FF6A06;
			width: 685rpx;
			line-height: 112rpx;
			background: #fff;
			color: #FF7A10;
		}
	}
</style>
